<div class="box">
  <div class="row">
    <x-button (click)="dialog('top-start')">top-start</x-button>
    <x-button (click)="dialog('top')">top</x-button>
    <x-button (click)="dialog('top-end')">top-end</x-button>
  </div>
  <div class="row">
    <x-button (click)="dialog('left')">left</x-button>
    <x-button (click)="dialog('center')">center(default)</x-button>
    <x-button (click)="dialog('right')">right</x-button>
  </div>
  <div class="row">
    <x-button (click)="dialog('bottom-start')">bottom-start</x-button>
    <x-button (click)="dialog('bottom')">bottom</x-button>
    <x-button (click)="dialog('bottom-end')">bottom-end</x-button>
  </div>
</div>

<x-dialog
  title="title"
  [(visible)]="visible"
  [placement]="placement"
  [beforeClose]="beforeClose"
>
  <span>The more you learn, the more you don't know.</span>
</x-dialog>
